<template>
    <div class="nav">
        <router-link to="/type">
            <span class="left"></span>
        </router-link>
        <router-link to="/search" v-bind:class="'search'">
            <p>
                <span></span>
                <input type="text" :placeholder="txt" />
            </p>
        </router-link>
        <router-link to="/server">
            <span class="right"></span>
        </router-link>
    </div>
</template>

<script>
export default {
    data() {
        return {
            txt: "",
            txtList: []
        };
    },
    mounted() {
        this.$http.get("./data/public.json").then(res => {
            this.txtList = res.data.content;
        });
        let timer = setInterval(() => {
            let num = parseInt(Math.random() * this.txtList.length);
            this.txt = this.txtList[num];
        }, 3000);
        // 通过$onec这个事件侦听器在定义完定时器之后的位置来清除定时器
        this.$once("hook:beforeDestroy", () => {
            clearInterval(timer);
        });
    }
};
</script>

<style lang="scss">
$theme-color: #ff0176;
$border-color: rgb(216, 216, 216);
.nav {
    display: flex;
    height: 30px;
    padding: 10px 15px;
    justify-content: space-between;

    .left,
    .right {
        display: inline-block;
        width: 22px;
        height: 100%;
    }
    .left {
        background: url("../../assets/images/home-menu_40x37.png") no-repeat
            center;
        background-size: contain;
    }
    .right {
        background: url("../../assets/images/home-chat.png") no-repeat center;
        background-size: contain;
    }
    .search {
        flex: 1;
        margin: 0 15px;
        input::-webkit-input-placeholder {
            /*WebKit browsers*/
            font-size: 13px;
            color: rgb(170, 170, 170);
        }

        input::-moz-input-placeholder {
            /*Mozilla Firefox*/
            font-size: 13px;
            color: rgb(170, 170, 170);
        }

        input::-ms-input-placeholder {
            /*Internet Explorer*/
            font-size: 13px;
            color: rgb(170, 170, 170);
        }
    }
    p {
        display: flex;
        height: 100%;
        align-items: center;
        background-color: #eeeeee;
        span {
            width: 15px;
            height: 100%;
            margin: 0px 10px;
            background: url("../../assets/images/home-server.png") no-repeat
                center/contain;
        }
        input {
            height: 15px;
            border: none;
            flex: 1;
            outline: none;
            background-color: #eeeeee;
        }
    }
    a {
        text-decoration: none;
    }
}
</style>